<template>
    <transition name="dialog">
        <div class='modal-wrapper' v-if="dialogVisible" @click.self='handleClose' @mousewheel.prevent>
            <div class="default-dialog" @mousewheel.passive.stop>
                <div class="header">
                    <div class="title">文档预览<el-button type="text" style="margin-left: 20px;"
                            @click="downFileFunc">下载</el-button></div>
                    <button type="button" class="close-btn" aria-label='close' @click='handleClose'></button>
                </div>
                <div class='modal-body'>
                    <iframe v-if="type == 'ppt' || type == 'xls' || type == 'doc'"
                        :src="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(previewUrl.file_url)"
                        frameborder="0" style="height:95%;width:100%">
                    </iframe>
                    <VueOfficePdf v-if="type == 'pdf'" :src="previewUrl.file_url" style="width:100%;height:95%;">
                    </VueOfficePdf>
                    <VueOfficeExcel :options="options" v-if="type == 'xlsx'" :src="previewUrl.file_url"
                        style="width:100%;height:95%;">
                    </VueOfficeExcel>
                    <VueOfficeDocx v-if="type == 'docx'" :src="previewUrl.file_url" style="width:100%;height:95%;">
                    </VueOfficeDocx>
                    <VueOfficePptx v-if="type == 'pptx'" :src="previewUrl.file_url" style="width:100%;height:95%;">
                    </VueOfficePptx>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import ElDialog2 from "element-ui/packages/dialog/src/component";
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficePptx from '@vue-office/pptx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    data() {
        return {
            dialogVisible: false,
            previewUrl: '',
            type: '',
            options: {
                transformData: function (workbookData) {
                    // 遍历所有工作表
                    workbookData.forEach(sheet => {
                        if (sheet.rows) {
                            // 遍历工作表的每一行
                            for (let i in sheet.rows) {
                                if (sheet.rows.hasOwnProperty(i)) {
                                    let rows = sheet.rows[i];
                                    if (rows.cells) {
                                        // 遍历行中的每一个单元格
                                        for (let j in rows.cells) {
                                            let cell = rows.cells[j];
                                            if (rows.cells.hasOwnProperty(j)) {
                                                // 检查单元格值是否为数字
                                                if (typeof cell.text === 'number' && !isNaN(cell.text)) {
                                                    // 处理边界情况：避免科学计数法，限制小数位数
                                                    const num = cell.text;
                                                    if (Math.abs(num) < 1e-6 || Math.abs(num) > 1e6) {
                                                        // 对于极大或极小的数，使用科学计数法
                                                        cell.text = num.toExponential(2);
                                                    } else {
                                                        // 使用 toFixed(2) 将数字格式化为两位小数字符串
                                                        cell.text = num.toFixed(2);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    })
                    return workbookData
                },
            }
        };
    },
    components: {
        ElDialog2,
        VueOfficeDocx,
        VueOfficeExcel,
        VueOfficePdf,
        VueOfficePptx
    },
    watch: {
        previewUrl(val) {
            console.log(val)
            this.type = val.file_suffix;

        },
    },
    methods: {
        downFileFunc() {
            // let a = document.createElement('a');
            // a.style.display = 'none';
            // a.download = this.previewUrl.file_name;
            // a.href = this.previewUrl.file_url;
            // document.body.appendChild(a);
            // a.click();
            // document.body.removeChild(a);

            const xhr = new XMLHttpRequest()
            xhr.open('GET', this.previewUrl.file_url + '?v=' + Date.now(), true)
            xhr.responseType = 'blob'
            xhr.onload = () => {
                const data = window.URL.createObjectURL(xhr.response)
                // 创建隐藏的可下载链接
                var eleLink = document.createElement('a');
                eleLink.download = this.previewUrl.file_name;
                eleLink.style.display = 'none';
                // 下载内容转变成blob地址
                eleLink.href = data;
                // 触发点击
                document.body.appendChild(eleLink);
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
            }
            xhr.send()

        },
        handleClose() {
            this.dialogVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.modal-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;

    .default-dialog {
        background-color: #fff;
        width: 100%;
        height: 100%;

        .modal-body {
            position: relative;
            // padding: 20px 20px 0;
            // box-sizing: border-box;
            width: 100%;
            height: 100%;
            // overflow-y: auto;
            background-color: #f2f2f2;

        }

        .header {
            padding: 10px 20px 10px;

            .title {
                line-height: 16px;
                font-size: 16px;
                font-weight: bold;
                color: #303133;
            }

            .close-btn {
                position: absolute;
                right: 20px;
                top: 30px;
                background-color: transparent;
                border-color: transparent;
                padding: 0;
                outline: none;
                cursor: pointer;
                text-align: center;
                z-index: 1;
                font-size: 0px;
                display: block;
                box-sizing: content-box;

                &::after {
                    content: '';
                    width: 14px;
                    height: 1px;
                    background: gray;
                    display: block;
                    transition: all .25s ease-in-out;
                }

                &::before {
                    content: '';
                    width: 14px;
                    height: 1px;
                    background: gray;
                    display: block;
                    transition: all .25s ease-in-out;
                }

                &::before {
                    transform: rotate(45deg);
                }

                &::after {
                    transform: translateY(-1px) rotate(-45deg);
                }

                &:hover::before,
                &:hover::after {
                    background: rgb(67, 67, 67);
                }
            }
        }

    }
}

/* 过渡动画 */
.dialog-enter-active,
.dialog-leave-active {
    transition: all 0.25s ease;
}

.dialog-enter-from,
.dialog-leave-to {
    opacity: 0;
}
</style>